<!--
 Use this page for RTL mode debugging.
 Editor Tools are loaded as git-submodules.
 You can pull modules by running `yarn pull_tools` and start experimenting.
 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Editor.js RTL example</title>
  <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
  <link href="assets/demo.css" rel="stylesheet">
  <script src="assets/json-preview.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<div class="ce-example">
  <div class="ce-example__header">
    <a class="ce-example__header-logo" href="https://codex.so/editor">Editor.js 🤩🧦🤨</a>

    <div class="ce-example__header-menu">
      <a href="https://github.com/editor-js" target="_blank">Plugins</a>
      <a href="https://editorjs.io/usage" target="_blank">Usage</a>
      <a href="https://editorjs.io/configuration" target="_blank">Configuration</a>
      <a href="https://editorjs.io/creating-a-block-tool" target="_blank">API</a>
    </div>
  </div>
  <div class="ce-example__content _ce-example__content--small">
    <div id="editorjs"></div>
    <div id="hint-core" style="text-align: center;">
      No core bundle file found. Run <code class="inline-code">yarn build</code>
    </div>
    <div id="hint-tools" style="text-align: center;">
      No submodules found. Run <code class="inline-code">yarn pull_tools</code>
    </div>
    <div class="ce-example__button" id="saveButton">
      editor.save()
    </div>
  </div>
  <div class="ce-example__output">
    <pre class="ce-example__output-content" id="output"></pre>

    <div class="ce-example__output-footer">
      <a href="https://codex.so" style="font-weight: bold;">Made by CodeX</a>
    </div>
  </div>
</div>

<!-- Load Tools -->
<!--
 You can upload Tools to your project's directory and use as in example below.
 Also you can load each Tool from CDN or use NPM/Yarn packages.
 Read more in Tool's README file. For example:
 https://github.com/editor-js/header#installation
 -->
<script src="./tools/header/dist/bundle.js" onload="document.getElementById('hint-tools').hidden = true"></script><!-- Header -->
<script src="./tools/simple-image/dist/bundle.js"></script><!-- Image -->
<script src="./tools/delimiter/dist/bundle.js"></script><!-- Delimiter -->
<script src="./tools/list/dist/bundle.js"></script><!-- List -->
<script src="./tools/checklist/dist/bundle.js"></script><!-- Checklist -->
<script src="./tools/quote/dist/bundle.js"></script><!-- Quote -->
<script src="./tools/code/dist/bundle.js"></script><!-- Code -->
<script src="./tools/embed/dist/bundle.js"></script><!-- Embed -->
<script src="./tools/table/dist/bundle.js"></script><!-- Table -->
<script src="./tools/link/dist/bundle.js"></script><!-- Link -->
<script src="./tools/raw/dist/bundle.js"></script><!-- Raw -->
<script src="./tools/warning/dist/bundle.js"></script><!-- Warning -->

<script src="./tools/marker/dist/bundle.js"></script><!-- Marker -->
<script src="./tools/inline-code/dist/bundle.js"></script><!-- Inline Code -->

<!-- Load Editor.js's Core -->
<script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true"></script>

<!-- Initialization -->
<script>
  /**
   * Saving button
   */
  const saveButton = document.getElementById('saveButton');

  /**
   * To initialize the Editor, create a new instance with configuration object
   * @see docs/installation.md for mode details
   */
  var editor = new EditorJS({
    /**
     * Wrapper of Editor
     */
    holder: 'editorjs',
    i18n: {

      /**
       * Text direction
       */
      direction: 'rtl',
    },

    /**
     * Tools list
     */
    tools: {
      /**
       * Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md}
       */
      header: {
        class: Header,
        inlineToolbar: ['link'],
        config: {
          placeholder: 'Header'
        },
        shortcut: 'CMD+SHIFT+H'
      },

      /**
       * Or pass class directly without any configuration
       */
      image: {
        class: SimpleImage,
        inlineToolbar: ['link'],
      },

      list: {
        class: List,
        inlineToolbar: true,
        shortcut: 'CMD+SHIFT+L'
      },

      checklist: {
        class: Checklist,
        inlineToolbar: true,
      },

      quote: {
        class: Quote,
        inlineToolbar: true,
        config: {
          quotePlaceholder: 'Enter a quote',
          captionPlaceholder: 'Quote\'s author',
        },
        shortcut: 'CMD+SHIFT+O'
      },

      warning: Warning,

      marker: {
        class:  Marker,
        shortcut: 'CMD+SHIFT+M'
      },

      code: {
        class:  CodeTool,
        shortcut: 'CMD+SHIFT+C'
      },

      delimiter: Delimiter,

      inlineCode: {
        class: InlineCode,
        shortcut: 'CMD+SHIFT+C'
      },

      linkTool: LinkTool,

      raw: RawTool,

      embed: Embed,

      table: {
        class: Table,
        inlineToolbar: true,
        shortcut: 'CMD+ALT+T'
      },

    },

    /**
     * This Tool will be used as default
     */
    // initialBlock: 'paragraph',

    /**
     * Initial Editor data
     */
    data: {
      blocks: [
        {
          type: "header",
          data: {
            text: "محرر.js",
            level: 2
          }
        },
        {
          type : 'paragraph',
          data : {
            text : 'مرحبا! تعرف على المحرر الجديد. في هذه الصفحة ، يمكنك رؤيتها في العمل - حاول تحرير هذا النص.'
          }
        },
        {
          type: "header",
          data: {
            text: "دلائل الميزات",
            level: 3
          }
        },
        {
          type : 'list',
          data : {
            items : [
              'وهو محرر بنمط الكتلة',
              'تقوم بإرجاع إخراج بيانات نظيفة في JSON',
              'مصممة لتكون قابلة للتوسيع والتوصيل مع واجهة برمجة تطبيقات بسيطة'
            ],
            style: 'unordered'
          }
        }
      ]
    },
    onReady: function(){
      saveButton.click();
    },
    onChange: function() {
      console.log('something changed');
    }
  });

  /**
   * Saving example
   */
  saveButton.addEventListener('click', function () {
    editor.save().then((savedData) => {
      cPreview.show(savedData, document.getElementById("output"));
    });
  });
</script>
</body>
</html>
